import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Tag, Table } from 'antd';
import { useRef } from 'react';
import request from 'umi-request';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch, Space } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import Delid from '@/components/Delid';
import { history } from 'umi';
// 二手房 房源管理

export const index = ({ dispatch, arr, props, history }: any) => {
  const [openModel, setopenModel] = useState(false);
  const [delindex, setindex] = useState(0);
  const [delitem, setitem] = useState('');

  const delid = (item: any, index: any) => {
    setopenModel(true);
    setindex(index);
    setitem(item.title);
  };
  const closeMdel = () => {
    setopenModel(false);
  };

  type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
      name: string;
      color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
  };

  const columns: ProColumns<GithubIssueItem>[] = [
    {
      dataIndex: 'id',
      title: 'id',
    },
    {
      title: '小区名称',
      dataIndex: 'estate_name',
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '面积',
      dataIndex: 'acreage',
    },
    {
      title: '总价',
      dataIndex: 'price',
    },
    {
      title: '排序',
      dataIndex: 'ordid',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (item: any, index: any) => {
        return (
          <div>
            <Space direction="vertical">
              <Switch
                checkedChildren="正常"
                unCheckedChildren="待审"
                defaultChecked={item === 0 ? false : true}
              />
            </Space>
          </div>
        );
      },
    },
    {
      title: '操作',
      // dataIndex: 'id',
      render: (_: any, item: any, index: any) => {
        return (
          <div>
            <Button
              style={{ marginRight: '10px' }}
              onClick={() => {
                goedit(item, item.id);
              }}
            >
              编辑
            </Button>
            <Button
              onClick={() => {
                delid(item, index);
              }}
            >
              删除
            </Button>
          </div>
        );
      },
    },
  ];
  // 编辑
  const goedit = (item: any, id: any) => {
    // console.log(item,id)
    history.push('/index/hire/second/detail', {
      state: { item, id },
    });
  };
  const { Search } = Input;
  const actionRef = useRef<ActionType>();
  // 搜索
  const onSearch = (value: string) => {
    dispatch({ type: 'second/GETSEAR', payload: value });
  };
  // useEffect(() => {
  //   dispatch({ type: 'second/GET_SECOND' });
  // }, []);
  return (
    <div>
      <h3>房源管理</h3>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
        dataSource={arr}
        cardBordered
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {
            // console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <Search
            placeholder="input search text"
            allowClear
            enterButton="Search"
            size="large"
            onSearch={onSearch}
          />,
          <Dropdown
            key="menu"
            menu={{
              items: [
                {
                  label: '1st item',
                  key: '1',
                },
                {
                  label: '2nd item',
                  key: '1',
                },
                {
                  label: '3rd item',
                  key: '1',
                },
              ],
            }}
          >
            <Button>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ]}
      />
      <Delid
        openModel={openModel}
        closeMdel={closeMdel}
        delindex={delindex}
        delitem={delitem}
      ></Delid>
      222
    </div>
  );
};

const mapStateToProps = ({ second: { arr } }: any) => {
  // console.log(arr,'arr')
  return {
    arr,
  };
};

export default connect(mapStateToProps)(index);
